<template>
    <fieldset>
        <legend>我的购物车</legend>
        <h1>我的购物车</h1>
        <ul>
            <li v-for="item in msg" :key="item.id">
                物品名称{{ item.title }}
                -----
                物品价格{{ item.price }}
                -----
                购买数量
                <button @click="del(item)">-</button>
                {{ item.count }}
                <button @click="adds(item)" :disabled="item.count===item.num">+</button>
            </li>
        </ul>
        <div>总价:{{aaa}}</div>
    </fieldset>
</template>
<script setup>
import { useGoods } from '../../store/goods';
import { userUse } from '../../store/uesr'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
let goodStore = useGoods()
let useStore = userUse()
// console.log(goodStore)
let { msg,aaa } = storeToRefs(goodStore)
let { datas } = storeToRefs(useStore)
// let ccc = ref(false)
let del = (item) => {
    item.count--
    if (item.count === 0) {
        msg.value = msg.value.filter(a => a.id !== item.id)
    }
    let a = datas.value.find(b=>b.id===item.id)
    a.inventory++
}

let adds = (item) => {
    item.count++
    let a = datas.value.find(b=>b.id===item.id)
    a.inventory--
    // console.log(a);
    // console.log(datas);
    console.log(msg.value[0].count);
    // console.log(datas.value);
    
    // if(a){
    //     if(msg.value[0].num===msg.value[0].count){
    //         ccc.value=true
    //     }else{
    //         ccc.value=false
    //     }
    // }
    // console.log(ccc.value);
}

</script>